<template>
  <div style="height: 100%;width: 100%;">
    <split-pane :min-percent="20" :default-percent="50" split="horizontal">
      <template slot="paneL">
        <div class="pneleft">
          <div class="pan_top">
            <span>
              持
              <br />
              仓
            </span>
          </div>
          <div class="pan_rig">
            <div class="pan_rig_top">
              <div class="pan_rig_to_zi">
                <button class="butt_cha" @click="btnlist && wholecloseposition()">全部平仓</button>
                <button class="butt_cha" @click="btnlist && quickcloseposition()">快捷平仓</button>
                <button class="butt_cha" @click="btnlist && quickbackhand()">快捷反手</button>
                <button class="butt_cha" @click="btnlist && ordernum()">止盈止损</button>
              </div>
            </div>
            <div class="data_lst">
              <div class="data_title">
                <div class="title_one" style="width: 135px;">合约</div>
                <div class="title_one" style="width: 55px;">方向</div>
                <!-- <div class="title_one" style="width: 55px;">持仓</div> -->
                <div class="title_one" style="width: 65px;">手数</div>
                <div class="title_one" style="width: 135px;">开仓价</div>
                <div class="title_one" style="width: 135px;">最新价</div>
                <div class="title_one" style="width: 135px;">持仓盈亏</div>
                <div class="title_one" style="width: 135px;">止损</div>
                <div class="title_one" style="width: 135px;">止盈</div>
                <div class="title_one" style="width: 135px;">手续费</div>
                <div class="title_one" style="width: 135px;">保证金</div>
                <div class="title_one" style="width: 135px;">名称</div>
              </div>
              <div class="data_info">
                <div
                  :class="activeClass1 == index ? 'activess' : ''"
                  class="data_title_one"
                  v-for="(item, index) in holdlist"
                  :key="index"
                  @click="getItemhold(item, index)"
                  style="cursor: default;"
                >
                  <div class="title_sone" style="width: 135px;">{{ (optionlist[item.code] && optionlist[item.code]['name_code']) || '- -' }}</div>
                  <div :class="item.rise_fall == 'RISE' ? 'title_red' : 'title_green'" class="title_sone" style="width: 55px;">{{ item.rise_fall == 'RISE' ? '买' : '卖' }}</div>
                  <!-- <div class="title_sone" style="width: 55px;">{{ item.contract_size }}</div> -->
                  <div class="title_sone" style="width: 65px;">{{ parseFloat(item.volume || 0).toFixed(0) }}</div>
                  <div class="title_sone" style="width: 135px;">{{ Number(item.open_price) || 0 }}</div>
                  <div class="title_sone" style="width: 135px;">{{ Number(ticket[item.symbol] && ticket[item.symbol].price) || 0 }}</div>
                  <div
                    :class="
                      (item.rise_fall == 'RISE'
                        ? parseFloat(ticket[item.symbol] && ticket[item.symbol]['price']) - parseFloat(item.open_price)
                        : parseFloat(item.open_price) - parseFloat(ticket[item.symbol] && ticket[item.symbol]['price'])
                      ).toFixed(2) >= 0
                        ? 'title_red title_sone'
                        : 'title_green title_sone'
                    "
                    style="width: 135px;"
                  >
                    {{
                      Number((ticket[item.symbol] && ticket[item.symbol].price) || 0) == 0
                        ? '- -'
                        : item.rise_fall == 'RISE'
                        ? (
                            (parseFloat((ticket[item.symbol] && ticket[item.symbol]['price']) || 0) - parseFloat(item.open_price || 0)) *
                            parseFloat(item.symbol_detail['unit_price'] || 0) *
                            parseFloat(item.volume || 0)
                          ).toFixed(2)
                        : (
                            (parseFloat(item.open_price || 0) - parseFloat((ticket[item.symbol] && ticket[item.symbol]['price']) || 0)) *
                            parseFloat(item.symbol_detail['unit_price'] || 0) *
                            parseFloat(item.volume || 0)
                          ).toFixed(2)
                    }}
                  </div>
                  <div class="title_sone" style="width: 135px;">{{ parseFloat(item.stop_loss_price || 0).toFixed(2) || '0.00 ' }}</div>
                  <div class="title_sone" style="width: 135px;">{{ parseFloat(item.stop_profit_price || 0).toFixed(2) || '0.00 ' }}</div>
                  <div class="title_sone" style="width: 135px;">{{ parseFloat(item.service_fee || 0).toFixed(2) }}</div>
                  <div class="title_sone" style="width: 135px;">{{ parseFloat(item.deposit || 0).toFixed(2) }}</div>
                  <div class="title_sone" style="width: 135px;">{{ item.symbol_cn }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template slot="paneR">
        <div class="pnerigh">
          <div class="pnerigh_title">
            <div :class="iscance1 ? '' : 'rigcan1'" class="rigtit_top">
              全
              <br />
              部
            </div>
            <div :class="iscance2 ? '' : 'rigcan1'" class="rigtit_top">
              可
              <br />
              撤
            </div>
          </div>
          <div class="pan_rig">
            <div class="pan_rig_top">
              <div class="pan_rig_to_zi">
                <button class="butt_cha" @click="btnlist && cancelorder()">撤单</button>
                <button class="butt_cha" @click="btnlist && wholecancelorder()">全部撤单</button>
                <button class="butt_cha" @click="btnlist && ordernum()">止盈止损</button>
              </div>
            </div>
            <div class="data_lst">
              <div class="data_title">
                <div class="title_one" style="width: 160px;">委托时间</div>
                <div class="title_one" style="width: 100px;">合约</div>
                <div class="title_one" style="width: 50px;">买卖</div>
                <div class="title_one" style="width: 135px;">委托价格</div>
                <div class="title_one" style="width: 135px;">止损</div>
                <div class="title_one" style="width: 135px;">止盈</div>
                <div class="title_one" style="width: 135px;">委托手数</div>
                <div class="title_one" style="width: 60px;">状态</div>
                <!-- <div class="title_one" style="width: 90px;">备注</div> -->
                <div class="title_one" style="width: 145px;">委托号</div>
                <div class="title_one" style="width: 135px;">名称</div>
              </div>
              <div class="data_info">
                <div
                  :class="activeClass2 == index ? 'activess' : ''"
                  class="data_title_one"
                  v-for="(item, index) in entrustlist"
                  :key="index"
                  @click="getEntrust(item, index)"
                  style="cursor: default;"
                >
                  <div class="title_sone" style="width: 160px;">{{ item.created_at }}</div>
                  <div class="title_sone" style="width: 100px;">{{ optionlist[item.code] && optionlist[item.code]['name_code'] }}</div>
                  <div :class="item.rise_fall == 'RISE' ? 'title_red' : 'title_green'" class="title_sone" style="width: 50px;">{{ item.rise_fall == 'RISE' ? '买' : '卖' }}</div>
                  <div class="title_sone" style="width: 135px;">{{ parseFloat(item.price || 0) }}</div>
                  <div class="title_sone" style="width: 135px;">{{ parseFloat(item.stop_loss_price || 0).toFixed(2) || '0.00 ' }}</div>
                  <div class="title_sone" style="width: 135px;">{{ parseFloat(item.stop_profit_price || 0).toFixed(2) || '0.00 ' }}</div>
                  <div class="title_sone" style="width: 135px;">{{ item.volume }}</div>
                  <div class="title_sone" style="width: 60px;">{{ item.status == 1 ? '正常' : '禁用' }}</div>
                  <!-- <div class="title_sone" style="width: 90px;">{{ item.desc }}</div> -->
                  <div class="title_sone" style="width: 145px;">{{ item.order_number }}</div>
                  <div class="title_sone" style="width: 135px;">{{ item.symbol_cn }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </split-pane>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'transaciton',
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    optionlist: state => state.trade.optionlist /* 全部合约代码 */
  }),
  watch: {},
  data() {
    return {
      entrustlist: [],
      btnlist: true,
      /* 按钮点击事件 */
      activeClass1: -1,
      activeClass2: -1,
      bntindex: true, //判断是条件单还是持仓单
      holdid: null, //持仓id
      iscance1: '',
      iscance2: '',
      holdlist: [], //持仓列表
      chicangtime: null,
      order_list_condition: [], //条件单、委托
      stop_profit_price: 0 /* 重设止盈价格 */,
      stop_loss_point: 0 /* 重设止损价格 */
    };
  },
  created: function() {
    // console.log(this.ticket)
    /* 获取持仓列表 */
    this.chicanglist();
    this.entrust();
    this.loadtime();
  },
  beforeDestroy() {
    clearTimeout(this.chicangtime);
    this.chicangtime = null;
  },
  methods: {
    loadtime() {
      this.chicangtime = setInterval(() => {
        this.chicanglist();
        this.entrust();
      }, 1500);
    },
    // 止盈止损设置
    ordernum(item) {
      if (!this.holdid) {
        return this.$message.error('请选中一笔进行操作！');
      }
      var that = this;
      that.btnlist = false;
      var bool = false;
      that.$layer.open({
        content: "<div id='inputbtn'></div>",
        title: '请输入止盈、止损值',
        btn: ['确定', '取消'],
        yes: function(index, layero) {
          //按钮【按钮一】的回调
          that.stop_profit_price = $('#stop_profit_price').val();
          that.stop_loss_point = $('#stop_loss_point').val();

          if (that.stop_profit_price == '' || that.stop_profit_price == 0 || that.stop_profit_price == undefined) {
            that.stop_profit_price = null;
          }
          if (that.stop_loss_point == '' || that.stop_loss_point == 0 || that.stop_loss_point == undefined) {
            that.stop_loss_point = null;
          }
          var postlsit;
          if (that.bntindex) {
            postlsit = {
              stop_profit_price: that.stop_profit_price,
              stop_loss_price: that.stop_loss_point,
              orderid: that.holdid
            };
          } else {
            postlsit = {
              stop_profit_price: that.stop_profit_price,
              stop_loss_price: that.stop_loss_point,
              orderid: that.form,
              type: 1
            };
          }
          if (!bool) {
            bool = true;
            that.$post('addons/tf-futures/order/up-with-price', postlsit).then(res => {
              that.btnlist = true;
              that.holdid = null;
              that.form = null;
              bool = false;
              that.activeClass1 = -1;
              that.activeClass2 = -1;
              that.$store.commit('set', {
                hoidlist: that.holdid
              });
              that.$layer.closeAll();
              if (res.code == 200) {
                that.$layer.msg(res.message || '设置成功');
              } else {
                that.$layer.msg(res.message || '设置失败');
              }
            });
          }
        },
        btn2: function(index, layero) {
          //按钮【按钮二】的回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        },
        cancel: function() {
          //右上角关闭回调
          that.btnlist = true;
          that.$layer.closeAll();
          that.$layer.msg('已取消');
          //return false 开启该代码可禁止点击该按钮关闭
        }
      });
      var appendHtml = $('#inputbtn').html(
        '<div>止盈:<input type="number" id="stop_profit_price" placeholder="请输入止盈" style="padding: 5px;"/></div>' +
          '<div>止损:<input type="number" id="stop_loss_point" placeholder="请输入止损" style="padding: 5px;"/></div>'
      );
      // this.$compile(appendHtml.get(0));
    },
    /* 获取持仓列表 */
    chicanglist() {
      this.$get('addons/tf-futures/order/list?state=hold').then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.holdlist = res.data;
        } else {
          console.log(res.message || '获取持仓列表失败');
        }
      });
    },
    /* 持仓列表点击事件*/
    getItemhold(item, index) {
      for (let i in this.optionlist) {
        if (item.code == this.optionlist[i]['code']) {
          this.$store.commit('trade/select', this.optionlist[i]);
        }
      }
      this.bntindex = true;
      this.activeClass1 = index;
      this.holdid = item.id;
      this.activeClass2 = -1;
      this.form = null;
      this.$store.commit('set', {
        hoidlist: this.holdid
      });
    },
    //全部平仓
    wholecloseposition() {
      this.btnlist = false;
      if (this.holdlist == '') {
        this.btnlist = true;
        this.$notify.error('暂无持仓记录无法全部平仓！');
        return;
      }
      this.$post('addons/tf-futures/order/close-all').then(res => {
        this.btnlist = true;
        this.activeClass1 = -1;
        this.holdid = null;
        this.$store.commit('set', {
          hoidlist: null
        });
        if (res.code == 200) {
          this.$notify({
            title: '成功',
            message: res.message || '全部平仓成功'
          });
          return this.$notify.success();
        } else {
          return this.$notify.error(res.message || '全部平仓失败');
        }
      });
    },
    //快捷平仓
    quickcloseposition() {
      this.btnlist = false;
      if (this.holdid == '' || this.holdid == null || this.holdid == undefined) {
        this.btnlist = true;
        this.$notify.error('请选择要交易的品种！');
        return;
      }
      this.$post('addons/tf-futures/order/close-order', {
        orderid: this.holdid
      }).then(res => {
        this.btnlist = true;
        this.activeClass1 = -1;
        this.holdid = null;
        this.$store.commit('set', {
          hoidlist: null
        });
        if (res.code == 200) {
          return this.$notify.success(res.message || '平仓成功');
        } else {
          return this.$notify.error(res.message || '平仓失败');
        }
      });
    },
    //快捷反手
    quickbackhand() {
      this.btnlist = false;
      if (this.holdid == '' || this.holdid == null || this.holdid == undefined) {
        this.btnlist = true;
        this.$notify.error('请选择要交易的品种！');
        return;
      }
      this.$post('addons/tf-futures/order/bank-hand', {
        orderid: this.holdid
      }).then(res => {
        this.btnlist = true;
        this.activeClass1 = -1;
        this.holdid = null;
        this.$store.commit('set', {
          hoidlist: null
        });
        if (res.code == 200) {
          return this.$notify.success(res.message || '反手成功');
        } else {
          return this.$notify.error(res.message || '反手失败');
        }
      });
    },
    //选中那一行
    getEntrust(item, index) {
      this.bntindex = false;
      this.activeClass2 = index;
      this.activeClass1 = -1;
      this.holdid = item.id;
      this.form = item.id;
    },
    //撤单
    cancelorder() {
      this.btnlist = false;
      if (this.form == null || this.form == '' || this.form == undefined) {
        this.$notify.error('请选中一单操作');
        this.btnlist = true;
        return;
      }
      this.$post('addons/tf-futures/order-reason/kill-order', { order_id: this.form }).then(res => {
        this.btnlist = true;
        if (res.code == 200) {
          this.$notify.success(res.message || '撤单成功！');
          this.activeClass2 = -1;
          this.holdid = null;
          this.form = null;
          this.$store.commit('set', {
            hoidlist: null
          });
          this.entrust();
        } else {
          this.$notify.error(res.message || '撤单失败！');
        }
      });
    },
    //全部撤单
    wholecancelorder() {
      this.btnlist = false;
      if (this.entrustlist == '' || this.entrustlist == []) {
        this.btnlist = true;
        this.$notify.error('暂无全部撤单记录无法全部撤单！');
        return;
      }
      this.$post('addons/tf-futures/order-reason/kill-all').then(res => {
        this.btnlist = true;
        this.activeClass2 = -1;
        this.holdid = null;
        this.$store.commit('set', {
          hoidlist: null
        });
        if (res.code == 200) {
          this.$notify.success(res.message || '全部撤单成功！');
          this.entrust();
        } else {
          this.$notify.error(res.message || '全部撤单失败！');
        }
      });
    },
    //委托
    entrust() {
      this.$get('addons/tf-futures/order-reason/olist').then(res => {
        if (res.code == 200) {
          // if (res.data.length == 0) {
          //   this.$notify.error('暂无信息！');
          // }
          this.entrustlist = res.data;
        } else {
          console.log(res.message || '暂无信息');
        }
      });
    }
  }
};
</script>

<style scoped>
/* 上方 */
.pneleft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
/* 上部分持仓分布 */
.pan_top {
  width: 25px;
  height: 100%;
  background-color: #e3e2da;
  border: #003c74 solid 1px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
/* 上方表格部分 */
.pan_rig {
  width: calc(100% - 28px);
  height: 100%;
  background-color: #ffffff;
}
/* 上方表格按钮 */
.pan_rig_top {
  width: 100%;
  height: 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
  box-sizing: border-box;
}
/* 按钮盒子 */
.pan_rig_to_zi {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* 按钮 */
.butt_cha {
  width: 78px;
  height: 23px;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #fbfbfb, #f7f7f7, #f2f2f2);
  border: #003c74 solid 1px;
  margin-right: 5px;
  margin-left: 3px;
}
/* 表格内容盒子 */
.data_lst {
  width: 100%;
  height: calc(100% - 26px);
  overflow-x: auto;
  overflow-y: hidden;
}
/* 表格标题 */
.data_title {
  height: 28px;
  margin-top: 2px;
  border-top: #7f9db9 solid 1px;
  border-bottom: #7f9db9 solid 1px;
  width: 200%;
}

/* 标题内部 */
.title_one {
  float: left;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-right: #7f9db9 solid 1px;
  color: #000000;
}
/* 表格内容盒子 */
.data_info {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: calc(100% - 30px);
  box-sizing: border-box;
  padding-bottom: 20px;
  width: 200%;
}
/* 表格内容 */
.data_title_one {
  width: 100%;
  height: 28px;
}
.title_sone {
  float: left;
  color: #000000;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  box-sizing: border-box;
}

.title_sone2 {
  color: #000000;
  height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0 2px;
  box-sizing: border-box;
}

.title_red {
  color: #fe2424;
}

.title_green {
  color: #007f00;
}

.title_blue {
  color: #0000ff;
}

/* 下方显示 */
.pnerigh {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
/* 下边左侧 */
.pnerigh_title {
  width: 25px;
  height: 100%;
  background-color: #ffffff;
}

.rigtit_top {
  width: 25px;
  height: 50%;
  background-color: #e3e2da;
  border: #003c74 solid 1px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}

.rigcan1 {
  background-color: #f7f7f7;
  color: #a0a0a0;
}

/*持仓*/
.activess {
  background-color: #3399ff;
  color: #ffffff;
}
</style>
